/**
* 主界面路由组件
*/
import React, { Component } from 'react'
import { Route, Switch } from 'react-router-dom'

import DaShenInfo from '../dashen-info/dashen-info'
import LaoBanInfo from '../laoban-info/laoban-info'
import Dashen from '../dashen/dashen'
import Laoban from '../laoban/laoban'
import Message from '../message/message'
import Personal from '../personal/personal'
import NotFound from '../../components/not-found/not-found'
import NavFooter from '../../components/nav-footer/nav-footer'
import Chat from '../chat/chat'

import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { getuserinfo } from '../../redux/actions'
import { NavBar } from 'antd-mobile'

import Cookies from 'js-cookie' // 可以操作cookie的对象 set() get() remove()
import { getRedirectTo } from '../../utils'

class Main extends Component {
  navList = [
    {
      path: '/laoban', // 路由路径
      component: Laoban,
      title: '大神列表',
      icon: 'dashen',
      text: '大神',
      hide: false
    },
    {
      path: '/dashen', // 路由路径
      component: Dashen,
      title: '老板列表',
      icon: 'laoban',
      text: '老板',
      hide: false
    },
    {
      path: '/message', // 路由路径
      component: Message,
      title: '消息列表',
      icon: 'message',
      text: '消息',
      hide: false
    },
    {
      path: '/personal', // 路由路径
      component: Personal,
      title: '用户中心',
      icon: 'personal',
      text: '个人',
      hide: false
    }
  ]

  componentDidMount = () => {
    // 登录过（cookie中有userid但是没有登录） redux没有user._id
    const userid = Cookies.get('userId')
    const { _id } = this.props.user
    if (userid && !_id) {
      // 发送异步请求获取user信息
      this.props.getuserinfo()

    }
  }

  render() {
    // 检查用户是否登录， 如果没有， 重定向到登录
    // const {user} = this.props
    // if (!user._id) {
    //   return <Redirect to='/login'/>
    // }

    // 读取cookie中的userid,
    const userid = Cookies.get('userId')
    // 如果没有 重定向到login页面
    if (!userid) {
      return <Redirect to='/login' />
    }
    // 如果有 读取redux的user
    const { user, unReadCount } = this.props

    // 如果user没有没有_id， 获取ajax请求 有cookie 就自动登录
    if (!user._id) {
      this.props.getuserinfo()
      return null
    } else {
      // 如果有cookie有_id 直接跳转至对应的界面
      // 如果请求根路径
      let path = this.props.location.pathname
      if (path === '/') {
        path = getRedirectTo(user.type, user.header)
        return <Redirect to={path} />
      }
    }

    let { navList } = this
    const path = this.props.location.pathname
    const currentNav = this.navList.find(e => e.path===path)

    if (currentNav) {
      // 决定哪个路由隐藏
      if (user.type === 'laoban') {
        // 隐藏数组的第二个
        navList[1].hide = true
        
      }else {
        // 隐藏第一个
        navList[0].hide = true
      }
    }

    return (
      <div>
        {currentNav? <NavBar style={{position: 'fixed', top: '0', width: '100%', zIndex: 1000}}>{currentNav.title}</NavBar> : null}
        <Switch>
          {
            navList.map(e => <Route path={e.path} component={e.component} key={e.path}></Route>)
          }
          <Route path='/dasheninfo' component={DaShenInfo}></Route>
          <Route path='/laobaninfo' component={LaoBanInfo}></Route>
          <Route path='/chat/:userid' component={Chat}></Route>
          <Route component={NotFound}/>
        </Switch>
        {currentNav? <NavFooter navList={navList.filter(e => !e.hide)} unReadCount={unReadCount}></NavFooter> : null}
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user, unReadCount: state.chat.unReadCount }),
  { getuserinfo }
)(Main)

/*
  1. 自动登录
    1.1 如果cookie有userid(但是redux的user中没有_id)， 发送请求获取对应user, 暂时不做显示
    1.2 如果cookie中没有userid， 自动跳转login界面
    1.3 redux 是否有_id，如果没有，那就暂时不作任何处理
    1.4 如果有cookie-userid 并且有user， 但是请求的是根路径 /
  2. 如果已经登录， 请求根路径 /
    2.1 根据user的type 和 header 来计算出一个重定向的路径，并且自动重定向到该路由
    2.2 需要写一个loading组件
*/